<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- //引入axios包 -->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 移入进度条包 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
</head>

<body>
  <button id="btn">发送axios请求</button>
</body>
<script>

  let btn = document.querySelector(`#btn`)

  // const myaxios = axios.create({
  //   baseURL: '/',
  //   timeout: 1000,
  //   headers: {}
  // });

    //创建axios对象
  const myaxios = axios.create({
    baseURL: '/',
    timeout: 10000,
    headers: {}
  });

  // 添加请求拦截器
  myaxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么

    //设置进度条
    NProgress.start()

    //打印配置对象
    // console.log(config);

    //声明token 校验身份
    const token ="asdasdas.dasdasd"

    console.log("token");

    //设置token 添加凭证
    config.headers.token =token

    //调试token
    // console.log(config.headers.token,'token');

    // 返回配置对象
    return config;

  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });


// 添加响应拦截器
myaxios.interceptors.response.use(function (response) {
    // 对响应数据做点什么

  //设置进度条
    NProgress.done()

    //尝试给响应添加属性
    response.res="响应"

    console.log(response.res);
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });




  btn.onclick = async function () {

    try {

       const re = await myaxios.get("/stop",{
        params:{
          userId:"001"
        }
      })

      // re
      // axios成功的值这个对象属性解析:
      //       - config:是axios请求的时候传入的配置对象
      //       - data:后端响应的数据
      //       - headers:响应头
      //       - request:底层真正使用的xhr实例对象
      //       - status:响应状态码
      //       - statusText:响应状态描述

      // axios成功的值
      console.log(re);
      // 后端响应的数据
      console.log(re.data);
      //我们的数据
      console.log(re.data.data);


    } catch (e) {
      console.log(e.message);
    }



  }

</script>

</html>